<template>
    <div class="wrapper">
        <div class="container" @click="ablumselect">
            <image class="image" v-if="img" :src="img" resize="contain"></image>
        </div>
        <text class="text" :value="src"></text>
        <div class="container" @click="takephoto">
            <image class="image" v-if="img1" :src="img1" resize="contain"></image>
        </div>
        <text class="text" :value="src1"></text>
    </div>
</template>

<script>
    var globalData = {
        src: '',
        src1: '',
        img: '',
        img1: ''
    }
    export default {
        name: 'HelloSignature',
        data() {
            return globalData
        },
        methods: {
            signature() {
                const mode = weex.requireModule('signature')
                mode.showSign(function (map) {
                    const flag = 'data:image/png;base64,'
                    globalData.src = flag + map.base64Img
                })
            },
            takephoto() {
                const mode = weex.requireModule('photo')
                mode.takePhoto(function (map) {
                    globalData.src1 = map.imgPath
                    globalData.img1 = 'file://' + map.imgPath
                })
            },
            ablumselect() {
                const mode = weex.requireModule('photo')
                mode.ablumSelect(function (map) {
                    globalData.src = map.imgPath
                    globalData.img = 'file://' + map.imgPath
                })
            }
        }
    }

</script>

<style scoped>
    .wrapper {
        justify-content: center;
        align-items: center;
    }

    .container {
        width: 602px;
        height: 402px;
        border-width: 2px;
        border-color: #dddddd;
        background-color: #F5F5F5;
        justify-content: center;
        align-items: center;
    }

    .image {
        width: 600px;
        height: 600px;
    }

    .text {
        width: 600px;
        height: 100px;
        font-size: 30px;
    }
</style>
